<template>
    <div class="goods-num">共{{ total }}件商品</div>
    <div class="goods-info" v-for="(item, index) in listData" :key="index">
        <div class="goods-info-l">
            <img :src="item.icon" alt="" />
            <h4>{{ item.name }}</h4>
        </div>
        <div class="goods-info-r">
            <p class="price">￥{{ item.price }}</p>
            <p>x{{ item.count }}</p>
        </div>
    </div>
    <div class="goods-total">
        合计<span>￥{{ totalPrice }}</span>
    </div>
</template>

<script>
export default {
    props: {
        data: Object,
    },
    data() {
        return {
            total: "",
            totalPrice: "",
            listData: [],
        };
    },
    watch: {
        data() {
            console.log("购物车进去:", this.data);
            this.listData = this.data.list;
            this.total = this.data.total;
            this.data.list.forEach(item => {
                console.log(item);
            });
            this.totalPrice = this.data.totalPrice;
        },
    },
    mounted() {},
    created() {
        console.log("购物车进去:", this.data);
        this.listData = this.data.list;
        this.total = this.data.total;
        this.totalPrice = this.data.totalPrice;
    },
};
</script>

<style lang="less" scoped>
.goods-num {
    font-size: 20px;
    color: #000;
}
.goods-info {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .goods-info-l {
        display: flex;
        align-items: center;
        img {
            width: 50px;
            height: 50px;
        }
        h4 {
            font-size: 16px;
            margin-left: 14px;
            color: #000;
        }
    }
    .goods-info-r {
        text-align: right;
        p {
            padding: 2px 0;
            font-size: 16px;
            color: rgb(106, 104, 104);
        }
        .price {
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }
    }
}
.goods-total {
    padding: 20px 0;
    text-align: right;
    font-size: 16px;
    color: #000;
    border-top: 1px solid #eee;
    span {
        font-size: 18px;
        font-weight: bold;
    }
}
</style>